본문 바로가기

퍼블리싱/HTML | CSS | Javascript

 (106)
아톰 에디터 단축키 모음 "F11" : 전체 화면으로 본다,"ctrl-," : 아톰 에디터 설정 화면을 연다,"ctrl-shift-n" : 아톰 에디터를 새로 열고 새 창을 생성한다,"ctrl-shift-w" : 아톰 에디터를 닫는다,"ctrl-shift-o" : 새 프로젝트 폴더를 연다."ctrl-o" : 파일을 연다,"ctrl-t" : 최근에 연 파일 목록을 보여준다,"ctrl-n" : 새 창을 생성한다,"ctrl-s" : 저장한다,"ctrl-shift-s" : 다른 이름으로 저장,"ctrl-w" : 창 닫기,"ctrl-z" : 실행 취소,"ctrl-y" : 재 실행,"ctrl-alt-i" : 개발 툴을 연다. "shift-delete" : 라인을 잘라낸다. 선택되었다면 그부분만 잘라내기,"ctrl-insert" : 라인을 ..
[링크] 홈페이지의 얼굴, 썸네일 이미지 설정 https://brunch.co.kr/@jiyeonsongofnt/11 홈페이지 url를 붙여넣어서 누군가에게 보낼때, 그 홈페이지에 대한 미리보기 ( 제목, 설명, 이미지 )가 나오는 경우를 본적 있을것이다. 당황스럽게 내 블로그는......내....얼굴...부분이... 확대되어 나오더라...8ㅅ8 이 이미지를 지정하는 방법 (meta 태그 사용법)에 대해 나와있는 글.
한글 폰트 import 모음 나는 보통 google font를 import 시켜서 사용한다. 영문 폰트와 한글폰트 모두. 트래픽 문제도 있지만, 일차적인 문제는 우리 사수님이 무조건 web font를 사용하시길 원하셔서....ㅎ_ㅎ 그중에서 내가 (최근들어) 제일 자주 쓰는것은 단연 Noto sans CJK kr ! 일전에는 나눔스퀘어나 나눔바른고딕 폰트를 애용했는데, 나눔바른고딕은 font weight를 bold로 줬을때 너무너무너무너무 안예뻐진다는 단점이 있었고 (심지어 부피도 커지더라. 줄바뀜현상 발견) 나눔 스퀘어는........ 처음에 봤을땐 참 예뻤는데 지금 봐서는 폰트가 좀 가볍다는 느낌이 들었다. noto sans는 구글과 어도비가 합작해서 만든 폰트로, 본고딕 이라고도 한다. 한글, 중국어, 일본어가 지원되므로 한국..
텍스트 관련 효과세트 1 1. 버튼 hover 효과 2. 텍스트 지직거리는 효과 3. 글자 깨진 효과 4. 텍스트 바뀌는 애니메이션 5. 텍스트 네온사인 효과 6. 텍스트 쉐도우 여러종류 7. 텍스트에 흐르는 윤곽선 효과 주기
[w3.js] 하나의 버튼으로 Toggle show 하나의 버튼으로 나타나게 했다가 사라지게 했다가 하는 효과를 줄때, 스크립트 짜기가 귀찮을 때가 있다. 그럴때 굉장히 간단하게 할수있는 방법! 먼저 w3.js를 import 한 다음에, Toggle Hide/Show 이렇게 onclick 속성 값으로 w3.toggleShow('컨트롤할 대상') 을 주면 바로 된다 ^______________^ 출처 : https://www.w3schools.com/w3js/w3js_toggle_show.asp
모바일에서 기본적으로 적용되는 css 없애버리기! 가끔 코딩하고 나면 모바일에서 input이나 select가 운영체제에 따라서 안예쁘게 바뀌어 버리곤 한다. 특히 아이폰 기본 select와 input 디자인 쉣.... 이럴때 간단하게 사용할수 있는 css 속성 ! ^__^ -webkit-appearance: none;-moz-appearance: none;appearance: none; 이것만 추가하면 된다 ㅎ.ㅎ
단어 단위로 줄바꿈되기, word-break 속성 업체에서 계속 컴플레인 들어왔던게 단어 단위로 끊어지지 않아서 문장이 자연스럽게 연결되지 않는다는 것이었다. 이 쉬운 속성을 몰랐다니 ! 단어 단위로 끊고싶은 곳에 word-break : option; 만 주면 된다 ^__^
캐싱처리를 위한 파라미터 값 처음 알게된것! 서버에서 직접 작업할때, css에서 어떤걸 수정하고 아무리 f5를 눌러도 적용되지 않아서 답답한 경우가 있다. 캐싱처리가 되지 않아서라고..! css / js파일을 링크하는 head 안에 해당 파일 이름 뒤에 ?m=20170504 이런식으로 날짜를 붙이게 되면, 컴퓨터가 자기가 저장했던 파일을 쓰면 안되고 새로 불러와야 하는구나, 하고 인식하고 리로드 할때마다 새로 불러온단다. 그래서 파일을 수정할때 뒤의 숫자를 꼭 변경해야 한다 ㅎ.ㅎ
제이쿼리 간단한 tab메뉴 HTML 첫번째메뉴 첫번째 탭 내용 두번째메뉴 두번째 탭 내용 CSS ul{list-style:none;} a{text-decoration:none;} .tab_wrap{width: 567px; float:left;} .tab_wrap{position:relative; width: 567px; float:left;} .tab_wrap>li>a { display:block; position:absolute; width:78px; text-align:center; background:#ffffff; color:#555; border:1px solid #dce3e9; border-bottom:0; padding:7px 16px; font-weight:bold; margin-left: 40px;} .tab_wr..
크로스 브라우징 관련 js 윈도우 7의 기본 브라우저가 IE9 버전이다. 심지어 아직 윈도우 xp를 사용하는 사람들도 꽤 많이 있다 ^_ㅠ 그래서 최소한 ie9버전까지는 크로스 브라우징이 가능해야 한다. 물론 크롬과 ie에서 동일하게 보이는것은 말할것도 없고. ie8버전까지 크로스 브라우징 한다면 꽤 많이...힘들다.......ㅠ...... 홈페이지: http://code.google.com/p/html5shiv/ - HTML5 요소를 지원하지 않는 브라우저(IE8 이하)에서 해당 요소를 지원할 수 있게 해주는 라이브러리. - 구버전 IE가 부분에 넣음 홈페이지: http://css3pie.com/ - CSS3 요소를 지원하지 않는 브라우저에서 CSS3 요소를 사용할 수 있게 해주는 라이브러리 - 구버전 IE에서도 둥근 외곽선, ..
jquery cdn주소 제이쿼리 Migrate ( IE하위버전에서 상위버전 jqurey 인식하게 하는것)은 cdn주소를 못찾았다. 폴더에 직접 넣어서 script 경로로 넣어야 할것 같다. Google : https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js MS : https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js CDNJS : https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js JSDelivr : https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js jquery : https://code.jquery.c..
레이어 팝업 오늘하루동안 열지않기 나도 아직 테스트 해보지 못한것. 하루 동안 이 창을 열지않음 [닫기] [출처] 레이어팝업_오늘하루 창닫기|작성자 휘성별님
select박스로 페이지 이동하기 (링크걸기) 가끔가다보면 select박스에서 하나의 option을 클릭 했을 때, 페이지가 이동하는 형식이 있다. 보통 family site나 서브페이지 내에서 네비게이션을 이용할때 많이 쓴다. 이 기능을 주는건 굉장히 간단하다. 이동1 이동2 [출처] select 링크 이동|작성자 휘성별님 이렇게 option의 value값에 이동할 페이지를 써주고, select에 onchange="window.open(value,'_self'); 이것만 추가해주면 끝!
마우스우클릭방지 / 선택방지 / 드래그방지 body태그에 oncontextmenu="return false;" onselectstart="return false;" ondragstart="return false;" contextmenu가 우클릭 방지 selectstart가 선택방지 dragstart가 드래그방지!
css rwd grid 반응형을 위한 그리드. 보통 12개의 칼럼으로 나뉘며, 칼럼중 1개만 차지할때, 2개를 차지할때 이런 식으로 넓이를 지정해 주면 된다. 각각의 col들은 모두 float: left; 되어야 한다. .col-1 {width: 8.33%;}.col-2 {width: 16.66%;}.col-3 {width: 25%;}.col-4 {width: 33.33%;}.col-5 {width: 41.66%;}.col-6 {width: 50%;}.col-7 {width: 58.33%;}.col-8 {width: 66.66%;}.col-9 {width: 75%;}.col-10 {width: 83.33%;}.col-11 {width: 91.66%;}.col-12 {width: 100%;} [class*="col-"] { fl..
CSS - flexbox 아직 한번도 코딩할때는 적용해 보지 못한 flexbox. 레이아웃을 위해 CSS3부터 생긴 속성이다. IE11부터 적용되어 아직은 대중적으로 사용하기엔 크로스 브라우징 문제가 있을듯 하다. display속성의 값으로 사용된다. display: flex; display: -webkit-flex; //크롬을 위한것. flex속성에는 다 써주기. 이 값을 가지고 있는 부모 div 안에 있는 자식들은 자동으로 flex된다. ● flex-direction을 이용하여 가로로 정렬할지, 세로로 정렬할지도 정할수 있다.물론 이 값은 여전히 부모에게 주는것. flex-direction : row; //가로정렬 flex-direction : row-reverse; flex-direction : column; //세로정렬 ..
글자 아이콘, fontawsome 홈페이지를 만들다보면 아이콘을 넣을 일이 굉장히 많다. 이런 짜잘짜잘한 아이콘을 다 포토샵에서 잘라가지고 저장해가지고 업로드해서 경로쓰고.....때에따라선 크기도 일일이 css로 조절하고... 얼마나 귀찮은지 ;ㅅ; 이런 귀찮음을 줄여주는 Font Awesome! http://fontawesome.io/ fontawsome은 한마디로 font icon이다. 우리가 웹상에서 쓰는 텍스트와 똑같이 아이콘을 만드는것. 그래서 css로 color지정도 굉장히 쉽다. 폰트어썸을 사용하려면, 직접 파일을 업로드 하는 방법도 있겠지만 역시 가장간편한건 cdn주소를 사용하는거다 :) 사이에 이것만 써주면 끝! 그리고 필요한게 있으면 폰트 어썸에서 아이콘을 검색해서 태그만 복붙하면 된다 ㅎ.ㅎ class명을 줌으로써 크..
background animate W3Cschool을 보다가 발견! css3의 animate를 이용해서 백그라운드를 animate할수도 있다 ㅋㅋㅋㅋ IE에서는 IE10버전부터 작동하는거 같다. animate를 하도 사용하지 않다보니 다 까먹었긴한데, animate할 대상에 백그라운드를 주고, -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */ animation: mymove 5s infinite; 이렇게 기본적인 mymove라는 animate를 써준다. animate를 정의하는 방법은 /* Chrome, Safari, Opera */ @-webkit-keyframes mymove { 50% {background-position: center;} } /* Standard..
jquery-ui 2 1. Add Class addclass도 animate하자! Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. 이런 구조의 html에, css에서 .toggler { width: 500px; height: 200px; position: relative; } #button { padding: .5em 1em; text-decoration: none; } #effect { width: 240px; padding: 1em; border: 1px solid #000; background: #eee; color: #333; } .newClass { text-indent: 40px; letter-spacing: .4em; width: 4..
jquery-ui 1 jquery-ui.js를 지금까지 animate에서 색깔도 바꿀수 있게 쓰려고 사용했던 나 자신을 굉장히 반성합니다 OTL jquer-ui.css도 있다는걸 오늘 알았다. 빠가사리. jquery-ui로 할수 있는게 굉장히 많은데, 일단 cdn주소부터 살펴보면 이렇다. 유용하게 쓸수있을것 같은 effect를 살펴보자. 물론 http://jqueryui.com/ jQuery UI jqueryui.com 여기서 데모까지 볼수 있다. 1. Draggable 선택자를 드래그 할수 있게 하려면 $( function() { $( "선택자" ).draggable(); } ); 물론 여러가지 옵션이 있으므로 잘 보고 사용하면 된다 :) 2. Resizable 크기를 줄이고 늘릴수 있게 하려면 $( function() {..
맨위로
Total : Today :
728x90

티스토리툴바